<template>
  <div class="project-item" :style="itemBg" @click.stop="cardClick" >
    <h1 :style="titleColor" v-text="projectInfo.projectName" class="title"></h1>
    <a-tooltip placement="top">
      <template slot="title">
        <span v-text="projectInfo.projectDesc"></span>
      </template>
      <h2 v-text="projectInfo.projectDesc" class="desc"></h2>
    </a-tooltip>

    <div class="action-btns">
      <a-tooltip placement="top">
        <template slot="title">
          <span>访问</span>
        </template>
        <a-icon @click.stop="visit" key="ellipsis" type="bank" />
      </a-tooltip>
      <a-tooltip placement="top">
        <template slot="title">
          <span>详情</span>
        </template>
        <a-icon @click.stop="cardClick" key="ellipsis" type="unordered-list" />
      </a-tooltip>
      <a-tooltip placement="top" v-if="showDelBtn">
        <template slot="title">
          <span>删除</span>
        </template>
        <a-icon @click.stop="delItem" key="ellipsis" type="delete" />
      </a-tooltip>
    </div>
  </div>
</template>

<script>
import { delPrototypeItem } from "@/api/prototype";
import { mapGetters } from "vuex";

import myProjectBg from "@/assets/images/project-bg-my.png";
import publicProjectBg from "@/assets/images/project-bg.png";
export default {
  props: ["projectInfo", "showDelBtn"],
  methods: {
    visit() {
      const { previewUrl } = this.projectInfo;
      if (previewUrl) {
        window.open(`${window.location.origin}${previewUrl}`);
      } else {
        this.$notification.error({
          message: "暂无访问地址"
        });
      }
    },
    cardClick() {
      const { id } = this.projectInfo;
      const { showDelBtn } = this;
      const type = showDelBtn ? 0 : 1;
      this.$router.push(`/proto-detail/${type}/${id}`);
    },
    // 删除
    delItem() {
      const { projectName, id } = this.projectInfo;

      this.$confirm({
        title: `确定删除 ${projectName} 项目?`,
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk: async () => {
          try {
            const { code, msg } = await delPrototypeItem({
              id
            });
            if (code === 200) {
              this.$notification.success({
                message: msg
              });
              this.$emit("refresh");
            }
          } catch (error) {}
        },
        onCancel() {}
      });
    }
  },
  computed: {
    ...mapGetters(["themeColor"]),
    titleColor() {
      return {
        color: this.themeColor,
        opacity: 0.8
      };
    },
    itemBg() {
      const imgURL = this.showDelBtn ?  publicProjectBg : myProjectBg;
      return {
        background: `url(${imgURL}) no-repeat`,
        backgroundSize: "contain"
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.project-item {
  display: inline-block;
  width: 270px;
  height: 300px;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px solid #eee;
  position: relative;
  transition: all 0.3s;
  padding-top: 100px;
  box-sizing: border-box;
  text-align: center;
  vertical-align: top;
  margin-right: 30px;
  cursor: pointer;
  .title {
    font-size: 20px;
    font-family: tahoma, "microsoft yahei", "\5FAE\8F6F\96C5\9ED1";
  }

  .desc {
    width: 100%;
    color: #909399;
    font-size: 14px;
    font-family: tahoma, "microsoft yahei", "\5FAE\8F6F\96C5\9ED1";
    margin-top: 10px;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    cursor: pointer;
  }
  &:hover {
    box-shadow: 0 2px 30px 0 rgb(0 0 0 / 10%);
    .action-btns {
      height: 40px;
      transition: all 0.3s;
    }
  }
  .action-btns {
    width: 100%;
    height: 0px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    font-size: 16px;
    justify-content: space-around;
    background-color: rgba(0, 0, 0, 0.1);
    align-items: center;
  }
}
</style>
